import styles from './index.less';
import Tabs from '../tabs/tabs';
import { Flex } from 'antd-mobile';

function TabList(props) {
  let tabs = props.tabList.map(tab => ({ title: tab.title }));
  let dataList = props.tabList.map(tab => tab.data);
  return (
    <div className={styles.normal}>
      <Tabs tabs={tabs}>
        {dataList.map((item, itemIndex) => (
          <Flex direction="column" key={itemIndex}>
            {item.map((msg, msgIndex) => (
              <Flex.Item key={msgIndex}>{msg.content}</Flex.Item>
            ))}
          </Flex>
        ))}
      </Tabs>
    </div>
  );
}

export default TabList;
